import * as echarts from "echarts"
import shanxi from "../assets/json/province/shanxi.json"
// const echarts= this.$echarts
const install = function (Vue) {
    Object.defineProperties(Vue.prototype, {
        $charts: {
            get() {
                return {
                    bar: function (id, data) {
                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                            tooltip: {},
                            dataset: {
                                dimensions: ['product', '2015', '2016', '2017'],
                                source: [
                                    { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                                    { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                                    { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
                                    { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
                                ]
                            },
                            color: ["#39FCFF"], // 柱状图颜色
                            xAxis: {
                                type: 'category',
                                axisLine: {
                                    lineStyle: {
                                        color: "#39FCFF" // x轴线条颜色
                                    }
                                }
                            },
                            yAxis: {
                                splitLine: { show: false },
                                axisLine: {
                                    lineStyle: {
                                        color: "#39FCFF" // y轴线条颜色
                                    }
                                }
                            },
                            grid: {
                                left: "50px",
                                top: "20px",
                                right: "10px",
                                bottom: "120px"
                            },
                            series: [
                                {
                                    type: 'bar'
                                },
                                {
                                    type: 'bar'
                                },
                                {
                                    type: 'bar'
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },
                    pie: function (id, data) {
                        let myChart = echarts.init(document.getElementById(id));
                        let option = {
                            // 其他图表配置项
                            //  textStyle: {
                            //     textBorderColor: 'transparent',
                            //     textBorderWidth: 0
                            // },
                            color: ['#FF6B6B', '#FFE066', '#06D6A0', '#118AB2'],
                            tooltip: {
                                trigger: 'item'
                            },
                            series: [
                                {
                                    name: '隧道',
                                    type: 'pie',
                                    radius: '60%',
                                    data: [
                                        { value: 1, name: '特长隧道' },
                                        { value: 2, name: '长隧道' },
                                        { value: 2, name: '中隧道' },
                                        { value: 2, name: '短隧道' }
                                    ],
                                    label: {
                                        position: 'inner',
                                        normal: {
                                            formatter: '{b}: {c}条',
                                            textStyle: {
                                                fontWeight: 'normal',
                                                fontSize: 14
                                            },
                                            color: '#fff'
                                        }

                                    },
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,

                                        }
                                    },
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,

                                        }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },
                    cityMap: function (id, data, cityName) {
                        var myChart = echarts.init(document.getElementById(id));
                        echarts.registerMap("shanxi", shanxi)

                        var option = {
                            // 其他图表配置项
                            textStyle: {
                                textShadow: 'none'
                            },
                            // 提示框
                            tooltip: {
                                triggerOn: "click", // 事件类型
                                enterable: true // 鼠标是否允许滑入悬浮框中
                            },
                            geo: { // 这个是重点 —— 这里设置为地图的阴影
                                map: cityName, // 表示中国地图
                                roam: false, // 禁止拖拽
                                label: { // 标志信息
                                    show: false, // 是否显示对应地名
                                    color: '#CFF6FF'
                                },
                                silent: true, // 禁止hover效果
                                zoom: 1.2, // 地图比例
                                center: [112.5, 37.65],
                                itemStyle: {
                                    areaColor: "rgb(32, 122, 122)",
                                    shadowColor: "rgb(32, 122, 122)",
                                    shadowBlur: 10
                                }
                            },
                            series: [{
                                name: "省市地图",
                                type: "map",  // 选择类型为地图
                                map: cityName, // 中国地图
                                roam: false,  // 是否允许缩放
                                zoom: 1.2,    // 放大比例
                                label: {      // 配置文本
                                    show: true,  // 是否允许地图显示文字
                                    fontSize: 12, // 配置字体样式
                                    color: "#fff"
                                },
                                center: [112.6, 37.6], // 设置地图中心
                                itemStyle: {
                                    // 地图的区域颜色，线和区块的颜色
                                    areaColor: "#3dc9cc",
                                    borderColor: "rgba(0,0,0,0.2)",
                                    borderWidth: 1, // 省份边框宽度
                                    shadowColor: "rgba(255,255,255,0.5)", // 省份边框阴影
                                    shadowBlur: 5, // 省份边框聚焦
                                },
                                data: []
                            }]
                        }
                        myChart.setOption(option);
                    },
                    construction: function (id, data) {
                        var measrement = data[0].measrement
                        var number = data[1].number
                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    // Use axis to trigger tooltip
                                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                                }
                            },color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#C37CEF' }
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color:  '#D9318C'}
                                      
                                    ]
                                }
                            ],
                            grid: {
                                top: '15%',
                                left: '5%',
                                right: '7%',
                                bottom: '2%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                axisLabel: {
                                    textStyle: {
                                        color: '#39fcff',
                                        fontSize: 12
                                    }
                                }
                            },
                            yAxis: [
                                {
                                    type: 'category',
                                    data: ['左线', '右线'],
                                    axisLabel: {
                                        formatter: '{value} ',
                                        show: true,
                                        textStyle: {
                                            color: '#39fcff',
                                            fontSize: 14,
                                            textShadow: 'none'
                                        }
                                    },
                                    splitLine: {
                                        show: false
                                    },
                                },
                            ],
                            series: [
                                {
                                    name: '监测位置',
                                    type: 'bar',
                                    stack: 'total',
                                    barWidth: 25, // 柱子宽度
                                    barGap: 36, // 柱图之间的间距
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    itemStyle: {
                                        color: "#FF6B6B",
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [0, 0, 0, 0]
                                        }
                                    },
                                    data: measrement
                                },
                                {
                                    name: '隧道长度',
                                    type: 'bar',
                                    stack: 'total',
                                    barGap: 36, // 柱图之间的间距
                                    barWidth: 20, // 柱子宽度
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    itemStyle: {
                                        color: "#000",
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [0, 10, 10, 0]
                                        }
                                    },
                                    data: number
                                }
                            ]
                        };
                        ;
                        myChart.setOption(option);
                    },
                    // 超前地质预报
                    advancedGeology: function (id, data) {

                        // 施工进度
                        var tunnelnumber = data.tunnelnumber
                        // 开挖进度
                        var progress = data.progress
                        // 超前地质预报进度
                        var advancedGeology = data.advancedGeology

                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#FF515A' }, // 设置颜色渐变
                                        { offset: 1, color: '#FFDD53' }
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color:  '#E2449B'},
                                        { offset: 1, color: '#1A7979' }
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#490FAF' },
                                        { offset: 1, color: '#64E5B8' }
                                    ]
                                }
                            ],
                            grid: {

                                top: '20%',
                                left: '5%',
                                right: '7%',
                                bottom: '2%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: { show: false },
                                    data: ['进口', '出口'],
                                    axisLabel: {
                                        textStyle: {
                                            color: '#39fcff',
                                            fontSize: 12
                                        }
                                    },
                                },
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    axisLabel: {
                                        textStyle: {
                                            color: '#39fcff',
                                            fontSize: 12
                                        }
                                    },
                                    splitLine: { show: false }
                                }
                            ],
                            series: [
                                {
                                    name: '隧道长度',
                                    type: 'bar',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: tunnelnumber,
                                    itemStyle: {
                                        color: "#39fcff",
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [10, 10, 0, 0]
                                        }
                                    }
                                },
                                {
                                    name: '施工进度',
                                    type: 'bar',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: progress,
                                    itemStyle: {
                                        color: "#5471c5",
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [10, 10, 0, 0]
                                        }
                                    }
                                },
                                {
                                    name: '超前地质预报进度',
                                    type: 'bar',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: advancedGeology,
                                    itemStyle: {
                                        color: "#90cc74",
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [10, 10, 0, 0]
                                        }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },
                    Constructionquality: function (id, data) {

                        // 施工进度
                        var tunnelnumber = data.tunnelnumber
                        // 开挖进度
                        var progress = data.progress
                        // 施工质量检测进度
                        var quality = data.quality

                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#E2449B' }, // 设置颜色渐变
                                        { offset: 1, color: '#F95111' }
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#FFDD53' },
                                        { offset: 1, color: '#FF515A' }
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#6574E2' },
                                        { offset: 1, color: '#261164' }
                                    ]
                                }
                            ],
                            grid: {
                                top: '10%',
                                left: '5%',
                                right: '7%',
                                bottom: '2%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: { show: false },
                                    data: ['初支进口', '初支出口', "二衬进口", "二衬出口"],
                                    axisLabel: {
                                        textStyle: {
                                            color: 'rgb(167,169,173)',
                                            fontSize: 12
                                        }
                                    }
                                }
                            ],
                            yAxis: [

                                {
                                    type: 'value',
                                    axisLabel: {
                                        textStyle: {
                                            color: 'rgb(167,169,173)',
                                            fontSize: 12
                                        }
                                    },
                                    splitLine: { show: false }
                                }
                            ],
                            series: [
                                {
                                    name: '隧道长度',
                                    type: 'bar',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: tunnelnumber,
                                    itemStyle: {
                                        color: 'rgb(255,65, 100)',
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [10, 10, 0, 0]
                                        }
                                    }
                                },
                                {
                                    name: '施工进度',
                                    type: 'bar',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: progress,
                                    itemStyle: {
                                        color: "rgb(1, 191, 236)",
                                        normal: {
                                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                            barBorderRadius: [10, 10, 0, 0]
                                        }
                                    }
                                },
                                {
                                    name: '施工质量检测进度',
                                    type: 'bar',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: quality,
                                    itemStyle: {
                                        color: 'rgb(255, 191, 0)',
                                        normal: {
                                            // 每根柱子颜色设置
                                            barBorderRadius: [10, 10, 0, 0]

                                        }
                                    }
                                },
                            ]
                        };
                        myChart.setOption(option);
                    },
                    BingMap: function (id, dddd) {

                        var chartDom = document.getElementById(id);
                        var myChart = echarts.init(chartDom);
                        var option = {
                            legend: {
                                bottom: '20'
                            },
                            series: [
                                {
                                    name: '洞幅的围岩等级',
                                    type: 'pie',
                                    radius: ['20%', '50%'],
                                    center: ['50%', '25%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    labelLine: {
                                        length: 5
                                    },
                                    data: dddd
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        };
                        myChart.setOption(option);
                    },
                    BingMap2: function (id, data) {
                        var chartDom = document.getElementById(id);
                        var myChart = echarts.init(chartDom);
                        var option = {
                            legend: {
                                top: 'bottom'
                            },
                            series: [
                                {
                                    name: 'Nightingale Chart',
                                    type: 'pie',
                                    radius: [20, 80],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    data: [
                                        { value: 40, name: 'Ⅲ级围岩' },
                                        { value: 38, name: 'Ⅳ级围岩' },
                                        { value: 32, name: 'Ⅴ级围岩' }
                                    ]
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },
                    WeiyanMap: function (id, dddd) {
                        var chartDom = document.getElementById(id);
                        var myChart = echarts.init(chartDom);
                        var option = {
                            legend: {
                                bottom: '20'
                            },
                            grid: {
                                top: '10%',
                                left: '5%',
                                right: '7%',
                                bottom: '2%',
                                containLabel: true
                            },
                            label: {
                                color: '#fff'
                            },
                            series: [
                                {
                                    name: '洞幅的围岩等级',
                                    type: 'pie',
                                    radius: ['20%', '50%'],
                                    center: ['50%', '25%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    labelLine: {
                                        length: 5
                                    },
                                    data: dddd
                                }
                            ], tooltip: {
                                trigger: 'item'
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        };
                        myChart.setOption(option);
                    },
                    ChuMap: function (id, dddd) {
                        console.log(dddd)
                        let datadata = [
                            { value: dddd[0], name: '初支厚度', itemStyle: { color: "#E2449B" } },
                            { value: dddd[1], name: '初支背部密实状况', itemStyle: { color: "#F95050" } },
                            { value: dddd[2], name: '锚杆拉 拔力', itemStyle: { color: "#FF8AA0" } },
                            { value: dddd[3], name: '钢拱架间距', itemStyle: { color: "#F99150" } },
                            { value: dddd[4], name: '锚杆长度及密实度', itemStyle: { color: "#F9CC50" } },
                            { value: dddd[5], name: '断面轮廓', itemStyle: { color: "#64E5B8" } },
                            { value: dddd[6], name: '仰拱厚度', itemStyle: { color: "#64D4E5" } },
                        ]
                        var chartDom = document.getElementById(id);
                        var myChart = echarts.init(chartDom);
                        var option = {
                            series: [
                                {
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: '50%',
                                    label: { color: '#fff' },
                                    data: datadata,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },
                    ErMap: function (id, dddd) {
                        var datadd = [
                            { value: dddd[0], name: '二衬背后空洞', itemStyle: { color: "#F99150" } },
                            { value: dddd[1], name: '二衬厚度', itemStyle: { color: "#64E5B8" } },
                        ]
                        var chartDom = document.getElementById(id);
                        var myChart = echarts.init(chartDom);
                        let option = {
                            series: [
                                {
                                    name: 'Access From',
                                    type: 'pie',
                                    label: { color: '#fff' },
                                    radius: '50%',
                                    data: datadd,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    },



                }

            }
        }
    })
}

export default install
